<template>
	<div id="temp">
		<!--<mt-swipe :auto="1000">-->
		  <!--<mt-swipe-item v-for="item in list" :key="item.id">	-->
		  	<!--<img :src="item.img" alt="">-->
		  <!--</mt-swipe-item>-->
		<!--</mt-swipe>-->
		<slider :imgs = "imgs"></slider>
		<!-- 九宫格 -->
		<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/news/newslist'>
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/photo/photolist'>
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/goods/goodslist'>
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/news/newslist'>
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/news/newslist'>
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to='/news/newslist'>
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">联系我们</div></router-link></li>
		        </ul> 
		</div>
	</div>
</template>
<script>
    import slider from './subcom/slider.vue';
	import {Toast} from 'mint-ui';
	import common from '../kits/common.js';

	export default {
	    components:{
	        slider
		},
		data(){
			return {

				imgs:[]
			}
		},
		created(){
			this.getimgs()
		},
		methods:{
			getimgs(){
				var url = common.apidomain+'/api/getlunbo';
				this.$http.get(url).then(function(response){
					var data = response.body;
					// console.log(data);
					if(data.status !=0){
						Toast(data.message);
						return;
					}
					this.imgs = data.message;
				})
			}
		}
		
	}
</script>
<style scoped>
	.red{
		color:red;
		font-size:30px;
	}

	.mint-swipe{
		height: 300px;
	}
	
	.mint-swipe-item{
		height: 100%;
		width: 100%;
		/*background-color: pink;*/
	}
	.mint-swipe-item img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.mui-content > .mui-table-view:first-child{
		background-color: #fff;
		border-top: 0;
		border-left: 0;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border-right: 0;
		border-bottom: 0;
	}
	.mui-icon-home:before,
	.mui-icon-email:before,
	.mui-icon-chatbubble:before,
	.mui-icon-location:before,
	.mui-icon-search:before,
	.mui-icon-phone:before{
		content: "";
		display: block;
		width: 40px;
		height: 40px;
		background-repeat: round;
		
	}
	.mui-icon-home:before{
		background-image: url(../../statics/imgs/1.png);
	}
	.mui-icon-email:before{
		background-image: url(../../statics/imgs/2.png);
	}
	.mui-icon-chatbubble:before{
		background-image: url(../../statics/imgs/3.png);
	}
	.mui-icon-location:before{
		background-image: url(../../statics/imgs/4.png);
	}
	.mui-icon-search:before{
		background-image: url(../../statics/imgs/5.png);
	}
	.mui-icon-phone:before{
		background-image: url(../../statics/imgs/6.png);
	}
</style>